<!DOCTYPE html>
<html>
<head>
    <title>写回答 {$seo_title} {$site_name}</title>
    <meta name="keywords" content="{$seo_keywords}" />
    <meta name="description" content="{$seo_description}">
    <tc_include file="Public:head" />
    <link href="/themes/simplebootx/Public/assets/css/reset.css" rel="stylesheet"/>
    <link href="/themes/simplebootx/Public/assets/css/sl_style.css?v={$SOURCE_VERSION}" rel="stylesheet"/>
    <style>
        .show-question-but {
            color:#000232;
            font-size: 18px;
            margin-left: 144px;
            position: absolute;
            right: 15px;
            bottom: -20px;
            cursor: pointer;
        }
        #article_content {
            word-wrap: break-word;
            display: inline-block;
            height: 100px;
            overflow: hidden;
        }
        .qst_content h2  {
            padding-left: 10px;
            padding-right: 0;
            font-size: 24px;
            line-height: 40px;
        }

    </style>
</head>
<body>
    <tc_include file="Public:nav" />
    <div class="container tc-main" style="width:1198px;">
        <div class="qst_content comwidth clearfix" style="margin-top: 60px;width: 1198px">
            <h2>{$info.post_title}</h2>
            <div class="leftarea">

                <!--问题内容-->
                <if condition="!empty($info['short_content'])">
                    <div class="proptom_top" style="position: relative;">

                        <div id="article_content">
                            {$info.short_content}
                        </div>

                        <span id="openItem" class="content_btn show-question-but">展 开</span>
                    </div>
                </if>

                <!--写回答-->
                <div class="answer">
                    <p class="tit" style="letter-spacing: 2px;">
                        填写答案:
                    </p>
                </div>
                
                <form action="" method="post" enctype="multipart/form-data" class="form-horizontal js-ajax-forms">
                    <input type="hidden" name="question_id" value="{$question_id}">
                    <div id="editor" style="margin: 50px auto 40px;position:relative;">
                        <textarea id="answer_show" name="answer_show"></textarea>
                        <textarea id="answer_content" name="post_content" style="z-index: -1;position:absolute;top: 40px; max-width: 20px;"></textarea>
                    </div>
                    <div class="submit_btn" style="">
                        <p>
                            <span class="submit_btn1">提交</span>
                            <span class="submit_btn2">取消</span>
                        </p>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <!-- JavaScript -->
    <tc_include file="Public:scripts" />
    <script type="text/javascript" src="__PUBLIC__/js/artDialog/artDialog.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/layer/layer_1.js"></script>
    <script type="text/javascript">

        // 问题展开效果
        var real_question   = '{$info.post_content}';
        var short_question  = '{$info.short_content}';
        $('.show-question-but').toggle(
            function () {
                $('#article_content').empty();
                $('#article_content').css('overflow', 'inherit');
                $('#article_content').html(real_question);
                $('.show-question-but').html('收起');
            }, function () {
                $('#article_content').empty();
                $('#article_content').css('overflow', 'hidden');
                $('#article_content').html(short_question);
                $('.show-question-but').html('展开');
            }
        );


        var loading = false;
        $(function(){

            $('.submit_btn1').click(function () {
                $('form.js-ajax-forms').submit();
            });

            $('.submit_btn2').click(function () {
                window.history.go(-1);
            });

            editorcontent = new baidu.editor.ui.Editor({
                initialFrameWidth   : '100%',   //设置编辑器宽度
                initialFrameHeight  : '320',    //设置编辑器高度
                scaleEnabled        : true,     //设置不自动调整高度
            });
            editorcontent.render('answer_show');

            // 监听编辑区内容变化
            editorcontent.addListener( 'selectionchange', function() {
                var content = editorcontent.getContent();
                $('#answer_content').val(content); // 方便表单提交验证
            });


            Wind.use('validate', 'ajaxForm', function() {

                var form = $('form.js-ajax-forms');

                //ie处理placeholder提交问题
                if ($.browser && $.browser.msie) {
                    form.find('[placeholder]').each(function() {
                        var input = $(this);
                        if (input.val() == input.attr('placeholder')) {
                            input.val('');
                        }
                    });
                }

                //表单验证开始
                form.validate({
                    //是否在获取焦点时验证
                    onfocusout : false,
                    //是否在敲击键盘时验证
                    onkeyup : false,
                    //当鼠标掉级时验证
                    onclick : false,
                    // 错误展示
                    showErrors : function(errorMap, errorArr) {
                        //errorMap {'name':'错误信息'}
                        //errorArr [{'message':'错误信息',element:({})}]
                        try {
                            $(errorArr[0].element).focus();
                            layer.msg(errorArr[0].message);
                        } catch (err) {

                        }
                        this.defaultShowErrors();
                    },
                    //指明错误放置的位置
                    errorPlacement: function(error, element) {
                    },
                    //验证规则
                    rules : {
                        'post_content' : {
                            required : 1
                        },
                    },
                    //验证未通过提示消息
                    messages : {
                        'post_content' : {
                            required : '请输入回答内容'
                        },
                    },
                    //验证通过，提交表单
                    submitHandler : function(forms) {

                        if (loading) {
                            layer.load();
                            return;
                        }
                        loading = true;

                        $(forms).ajaxSubmit({
                            url : form.attr('action'),
                            dataType : 'json',
                            success : function(data, statusText, xhr, $form) {
                                layer.msg(data.info, {time : 3000});
                                if (data.status == 1) {

                                    setTimeout(function () {
                                        window.location.href = "{:U('Question/Question/center_question')}" + "&list_index=1";
                                    }, 3000);
                                }
                                loading = false;
                            }
                        });
                    }
                });
            });
        });

    </script>
</body>
</html>